<template>
    <div>
        <!-- 商品管理 -->
        <div class="buttonTop">
            <el-button type="primary" round @click="addGoods">添加商品</el-button>
            <el-button type="warning" round @click="up">上架</el-button>
            <el-button type="info" round @click="batchDel">批量删除</el-button>
        </div>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <!-- 商品名称 -->
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="18">
                        <el-form-item label="商品名称">
                            <el-input v-model="form.goodsName" placeholder="请输入名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                </el-row>

                <!-- 商品类别 -->
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="18">
                        <el-form-item label="商品类别">
                            <el-cascader
                                :options="categoryOptions"
                                :v-model="form.category"
                                ref="cascaderCategory"
                                @change="handleChange"
                                change-on-select
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                </el-row>

                <!-- 库存, 价格 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="库存">
                            <el-input v-model="form.stock" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="价格">
                            <el-input v-model="form.price" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态">
                            <template>
                                <el-select v-model="form.status" placeholder="请选择">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 图片 -->
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="18">
                        <el-form-item label="商品图片">
                            <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisiblePic" size="tiny">
                                <img width="100%" :src="dialogImageUrl" alt />
                            </el-dialog>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                </el-row>

                <!-- 提交按钮 -->
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="16">
                        <el-button type="primary" @click="submit()">提交</el-button>
                    </el-col>
                    <el-col :span="6">&nbsp;</el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-table
            ref="multipleTable"
            :data="goodsData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column fixed="left" prop="id" label="编号" width="120"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="120"></el-table-column>
            <el-table-column prop="category" label="商品类别" width="200"></el-table-column>
            <el-table-column prop="stock" label="库存" width="120"></el-table-column>
            <el-table-column prop="price" label="价格" width="120"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.status === '正常' ? 'primary': 'info'"
                        close-transition
                    >{{scope.row.status}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <span class="demonstration">&nbsp;</span>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentPage: 4,
            multipleSelection: [],
            dialogImageUrl: "",
            dialogVisiblePic: false,
            dialogVisible: false,
            form: {
                id: "",
                goodsName: "",
                category: "",
                stock: "",
                price: "",
                status: ""
            },
            title: "",
            goodsData: [
                {
                    id: "1",
                    goodsName: "小米",
                    category: "手机",
                    stock: 199,
                    price: 1499,
                    status: "正常"
                },
                {
                    id: "2",
                    goodsName: "华为",
                    category: "手机",
                    stock: 200,
                    price: 2499,
                    status: "下架"
                }
            ],
            categoryOptions: [
                {
                    label: "数码",
                    value: "数码",
                    children: [
                        {
                            value: "手机",
                            label: "手机"
                        }
                    ]
                }
            ],
            options: [
                {
                    value: "正常",
                    label: "正常"
                },
                {
                    value: "下架",
                    label: "下架"
                }
            ]
        };
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisiblePic = true;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        addGoods() {
            this.title = "添加商品";
            this.dialogVisible = true;
        },
        handleChange(value) {
            console.log(value);
            this.form.category = value;
        },

        // 添加商品提交操作
        submit() {
            if (this.title == "编辑信息") {
                this.goodsData.forEach(element => {
                    if (element.goodsName == this.form.goodsName) {
                        element.goodsName = this.form.goodsName;
                        element.category = this.form.category;
                        element.stock = this.form.stock;
                        element.price = this.form.price;
                        element.status = this.form.status;
                        console.log(element.goodsName);
                    }
                });
            } else {
                this.goodsData.push({
                    id: Date.parse(new Date()) / 1000,
                    goodsName: this.form.goodsName,
                    category: this.form.category,
                    stock: this.form.stock,
                    price: this.form.price,
                    status: this.form.status,
                    upfile: []
                });
                alert("添加成功");
            }
            this.dialogVisible = false;
        },
        edit(row) {
            this.title = "编辑信息";
            this.dialogVisible = true;
            this.form.goodsName = row.goodsName;
            this.form.category = row.category;
            this.form.stock = row.stock;
            this.form.price = row.price;
            this.form.status = row.status;
        },
        // 获取多选框中的内容
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        batchDel() {
            this.multipleSelection.forEach(element => {
                this.goodsData.forEach((item, index) => {
                    if (element.goodsName == item.goodsName) {
                        this.goodsData.splice(index, 1);
                    }
                });
            });
        },
        up(){
            this.multipleSelection.forEach(element => {
                this.goodsData.forEach((item) => {
                    if (element.id == item.id) {
                        item.status = '正常';
                    }
                });
            })
        }
    }
};
</script>
<style scoped>
.buttonTop {
    float: left;
    margin-left: 60px;
}
</style>